<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas Demo</title>
        <script type="text/javascript">
        function drawDiagonal () {
            var diagonal = document.querySelector("#diagonal");
            var ctx = diagonal.getContext("2d");
            var desktop = new Image();
            desktop.src = "assets/images/desktop.png";
            ctx.save();
            ctx.translate(480, 180);
            ctx.scale(1, 1);
            ctx.drawImage(desktop, 0, 0);
            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);

            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);

            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);
            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);
            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);
            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);
            ctx.rotate(45 * Math.PI / 180);
            ctx.drawImage(desktop, 0, 0);
            ctx.restore();

            ctx.save();
            ctx.lineWidth = 2;
            ctx.strokeStyle = "orange";
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(500, 500);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(150, 100);
            ctx.lineTo(550, 500);
            ctx.stroke();
            ctx.restore();
            ctx.save();
            
            ctx.beginPath();
            // ctx.translate(300, 200);
            ctx.moveTo(10, 500);
            ctx.quadraticCurveTo(0, 0, 500, 10);
            // ctx.quadraticCurveTo(310, -250, 410, -250);
            ctx.lineWidth = 20;
            var textureImg = new Image();
            textureImg.src = "assets/images/texture.png"
            ctx.strokeStyle = ctx.createPattern(textureImg, "repeat");
            ctx.stroke();
            ctx.restore();


            ctx.beginPath();
            ctx.save();
            ctx.translate(100, 400);
            ctx.scale(1, 2);
            // var colorGradinet = ctx.createLinearGradient(0, 0, 400, 0);
            var colorGradinet = ctx.createRadialGradient(0, 25, 100, 400, 25, 100);
            colorGradinet.addColorStop(0,"red");
            colorGradinet.addColorStop(0.5,"green"); 
            colorGradinet.addColorStop(1,"blue");
            ctx.fillStyle = colorGradinet;
            ctx.fillRect(0, 0, 400, 50);
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'yellow';
            ctx.strokeRect(0, 0, 400, 50);
            ctx.restore();
        }
        window.onload = drawDiagonal;
        function drawTree () {
            var tree = document.querySelector("#tree");
            var ctx = tree.getContext("2d");
            ctx.save();
            ctx.lineWidth = "2";
            ctx.strokeStyle = "blue";
            ctx.translate(10, 10);
            ctx.strokeRect(0, 0, 100, 100);
            ctx.fillText("Hello Canvas", 10, 10);
            ctx.restore();
            ctx.save();
            ctx.lineWidth = "5";
            ctx.strokeStyle = "orange";
            ctx.translate(10, 10);
            ctx.moveTo(0, 0);
            ctx.lineTo(100, 100);
            ctx.stroke();
            ctx.restore();
            ctx.save();
            ctx.translate(200, 200);
            ctx.fillStyle = "#663300";
            ctx.fillRect(0, 0, 100, 100);
            ctx.restore();
        }
        function clickCanvas (event) {
            console.log(window.JSON.stringify(event));
        }
        </script>
    </head>
    <body>
        <canvas id="diagonal" style="border: 1px solid #000" width="800" height="600" onclick="javascript: clickCanvas();"></canvas>
        <br>
        <button id="drawTree" onclick="javascript: drawTree();">绘制树</button>
        <br>
        <canvas id="tree" style="border: 1px solid #000" width="800" height="600"></canvas>
    </body>
</html>